<template>
    <div id='rentMessageQuery'> 
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="出租用户名" class="inline-input-head">
                    <el-autocomplete class="inline-input" v-model="formInline.lessor" 
                    :fetch-suggestions="querySearchLessor"   placeholder="出租方名字" 
                    ></el-autocomplete>
            </el-form-item>
            <el-form-item label="抢租用户名"  class="inline-input-head">
                <el-autocomplete class="inline-input" v-model="formInline.tenantry" 
                :fetch-suggestions="querySearchTenantry"   placeholder="抢租客名字" 
                ></el-autocomplete>
            </el-form-item>
            <el-form-item label="物业名称"  class="inline-input-head">
                <el-autocomplete class="inline-input" v-model="formInline.propertyName" 
                :fetch-suggestions="querySearchPropertyName"   placeholder="物业名称" 
                ></el-autocomplete>
            </el-form-item>
            <br>
            <span class="spanfont">订单状态：</span>
            <el-select v-model="formInline.status" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value"
                 :label="item.label" :value="item.value"></el-option>
            </el-select>            
            <span class="spanfont">出租开始时间  </span>
            <el-date-picker v-model="formInline.rentStartTime"  type="daterange" align="right" unlink-panels
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions">
            </el-date-picker>
            <span class="spanfont">出租结束时间  </span>
            <el-date-picker v-model="formInline.rentEndTime"  type="daterange" align="right" unlink-panels
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions">
            </el-date-picker>

            <el-form-item style="margin-left:10px">
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData"  border style="width: 100%" :key="Math.random()"> 
            <el-table-column prop="rentMessageId" label="订单id" width="80">
            </el-table-column>
             <el-table-column  prop="spacingSpaceId" label="停车位id"  width="80">
            </el-table-column>
             <el-table-column  prop="lessorId" label="出租方id"  width="80">
            </el-table-column>
             <el-table-column  prop="lessor" label="出租方名字"  width="100">
            </el-table-column>
             <el-table-column  prop="tenantryId" label="抢租方id"  width="80">
            </el-table-column>
             <el-table-column  prop="tenantry" label="抢租方名字"  width="100">
            </el-table-column>
            <el-table-column  prop="propertyManagerId" label="物业id" width="80">
            </el-table-column>
            <el-table-column  prop="propertyName" label="物业名称" width="100">
            </el-table-column>
            <el-table-column  prop="hourCost"  label="每小时收费标准"  width="80">
            </el-table-column>
            <el-table-column  prop="dayCost" label="每天收费标准" width="80">
            </el-table-column>
            <el-table-column  prop="weekCost" label="每周收费标准" width="80">
            </el-table-column>
            <el-table-column label="出租方式" width="100">
                <template slot-scope="scope" >
                    <span v-if='scope.row.rentype==0'>按时出租</span>
                    <span v-if='scope.row.rentype==1'>按天出租</span>
                    <span v-if='scope.row.rentype==2'>按周出租</span>
                </template>
            </el-table-column>
            <el-table-column  prop="rentStartTime" label="出租开始时间" width="200">
            </el-table-column>
            <el-table-column  prop="rentEndTime" label="出租结束时间" width="200">
            </el-table-column>
            <el-table-column  prop="propertyManagerGet" label="物业比例" width="80">
            </el-table-column>
            <el-table-column  prop="platoformGet" label="平台比例" width="80">
            </el-table-column>
            <el-table-column label="订单状态" width="80">
                <template slot-scope="scope" >
                    <span v-if='scope.row.status==0'>出租中</span>
                    <span v-if='scope.row.status==1'>已抢单</span>
                    <span v-if='scope.row.status==2'>已支付</span>
                    <span v-if='scope.row.status==3'>已完成</span>
                </template>
            </el-table-column>
            <el-table-column  prop="inTime" label="入场时间" width="200">
            </el-table-column>
            <el-table-column label="入场照片" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.inPic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column  prop="outTime" label="出场时间" width="200">
            </el-table-column>
            <el-table-column label="出场照片" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.outPic" fit="contain"></el-image>
                </template>
            </el-table-column>
           <el-table-column fixed="right" prop="cost" label="本单消费/元"  width="100">
            </el-table-column>
        </el-table>
    </div>
</template>

<style>
    .inline-input{
        width:330px;       
    }
    .inline-input-head{
        margin-top:20px;
    }
    .spanfont{
        font-size: 14px;
    }
</style>

<script>
    export default {
        name:'rentMessageQuery',
        data(){
            return {
                tableData:[],
                options:[
                    {
                        value:'0',
                        label:'出租中'
                    },
                    {
                        value:'1',
                        label:'已抢单'
                    },
                    {
                        value:'2',
                        label:'已支付'
                    },
                    {
                        value:'3',
                        label:'已完成'
                    },
                ],
                pickerOptions: {
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                            }
                        }]
                },
                formInline:{
                    status:'3',
                    lessor:'',
                    tenantry:'',
                    rentStartTime:'',
                    rentEndTime:'',
                    propertyName:''
                },
                propertyNameData:[],
                lessorData:[],
                tenantryData:[],           
            }
        },
        methods:{
            onSubmit(){            
                this.$axios.get("/getRentMessageByCondition",{params:{
                    status:this.formInline.status,
                    lessor:this.formInline.lessor,
                    tenantry:this.formInline.tenantry,
                    rentStartTimeStart:this.formInline.rentStartTime[0],
                    rentStartTimeEnd:this.formInline.rentStartTime[1],
                    rentEndTimeStart:this.formInline.rentEndTime[0],
                    rentEndTimeEnd:this.formInline.rentEndTime[1],
                    propertyName:this.formInline.propertyName
                }})
                .then(resp=>{        
                    console.log(resp.data.data);
                    if(resp.data.success){
                        if(resp.data.data.length==0){
                            this.$message("未找到您搜索的数据")
                        } else{                    
                            for(let i=0;i<resp.data.data.length;i++){
                                let obj={
                                    rentMessageId:resp.data.data[i].rentMessageId,
                                    spacingSpaceId:resp.data.data[i].spacingSpaceId,
                                    lessorId:resp.data.data[i].lessorId,
                                    lessor:resp.data.data[i].lessor,
                                    tenantryId:resp.data.data[i].tenantryId,
                                    tenantry:resp.data.data[i].tenantry,
                                    propertyManagerId:resp.data.data[i].propertyManagerId,
                                    propertyName:resp.data.data[i].propertyName,
                                    hourCost:resp.data.data[i].hourCost,
                                    dayCost:resp.data.data[i].dayCost,
                                    weekCost:resp.data.data[i].weekCost,
                                    rentype:resp.data.data[i].rentype,
                                    rentStartTime:resp.data.data[i].rentStartTime,
                                    rentEndTime:resp.data.data[i].rentEndTime,
                                    propertyManagerGet:resp.data.data[i].propertyManagerGet,
                                    platoformGet:resp.data.data[i].platoformGet,
                                    status:resp.data.data[i].status,
                                    inTime:resp.data.data[i].inTime,
                                    inPic:resp.data.data[i].inPic,
                                    outTime:resp.data.data[i].outTime,
                                    outPic:resp.data.data[i].outPic,
                                    cost:resp.data.data[i].cost
                                }
                                this.tableData[i]=obj;                        
                            }

                        this.$forceUpdate();
                        }
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                        console.log(error);
                })
            },
            getPropertyName(){
                this.$axios.get("/getPropertyManagerName",{params:{}})
                .then(resp=>{                
                    if(resp.data.success){
                        for(let i=0;i<resp.data.data.length;i++){
                            let obj={value:''};
                            obj.value = resp.data.data[i];
                            this.propertyNameData[i]=obj;                        
                        }                   
                        }else{
                            this.$message({
                                message:resp.data.message,
                                type:"warning"
                            })
                        }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                        console.log(error);
                })
            },  
            getLessor(){
                this.$axios.get("/getLessor",{params:{}})
                .then(resp=>{                
                    if(resp.data.success){
                        for(let i=0;i<resp.data.data.length;i++){
                            let obj={value:''};
                            obj.value = resp.data.data[i];
                            this.lessorData[i]=obj;                        
                        }                   
                        }else{
                            this.$message({
                                message:resp.data.message,
                                type:"warning"
                            })
                        }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                        console.log(error);
                })
            },  
            getTenantry(){
                this.$axios.get("/getTenantry",{params:{}})
                .then(resp=>{                
                    if(resp.data.success){
                        for(let i=0;i<resp.data.data.length;i++){
                            let obj={value:''};
                            obj.value = resp.data.data[i];
                            this.tenantryData[i]=obj;                        
                        }                   
                        }else{
                            this.$message({
                                message:resp.data.message,
                                type:"warning"
                            })
                        }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                        console.log(error);
                })
            },  
            querySearchPropertyName(queryString, cb) {
                var data = this.propertyNameData;
                var results = queryString ? data.filter(this.createFilter(queryString)) : data;
                // 调用 callback 返回建议列表的数据
                
                cb(results);
            },
            querySearchLessor(queryString, cb) {
                var data = this.lessorData;
                var results = queryString ? data.filter(this.createFilter(queryString)) : data;
                // 调用 callback 返回建议列表的数据
                
                cb(results);
            },
            querySearchTenantry(queryString, cb) {
                var data = this.tenantryData;
                var results = queryString ? data.filter(this.createFilter(queryString)) : data;
                // 调用 callback 返回建议列表的数据
                
                cb(results);
            },
            createFilter(queryString) {
                return (data) => {
                    return (data.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
        },
        mounted(){
            this.getPropertyName();
            this.getLessor();
            this.getTenantry();
        }
    }
</script> 
